
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('../../../../../resources/assets/js/bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('Sidebar', require('../../../../../resources/assets/js/components/MenuComponent.vue'));
Vue.component('Topbar', require('../../../../../resources/assets/js/components/HeaderComponent.vue'));

const app = new Vue({
    el: '#app',
    data: {
        items: [],
        dialogVisible: false,
        form: {
            status: true
        },
        loading: true,
        role: [],
        params: {
            limit: 10,
            offset: 0
        },
        currentPage: 1,
        total: 0,
        // 当前选项卡标签
        currentTab: 'normal'
    },
    created() {
      this.fetch();
      this.fetchRole();
    },
    methods: {
        fetch() {
            axios.get('/admin/user_all', {params: this.params}).then((res) => {
                if (res.data.code === 0) {
                    this.items = res.data.data.items;
                    this.total = res.data.data.total;
                } else {
                    this.$message(res.data.msg);
                }
                this.loading = false;
            }).catch(function() {
                this.$message('系统错误');
                this.loading = false;
            })
        },
        fetchRole() {
            axios.get('/admin/role_all').then((res) => {
                if (res.data.code === 0) {
                    this.role = res.data.data.items;
                } else {
                    this.$message(res.data.msg);
                }
            }).catch(function() {
                this.$message('系统错误');
            })
        },
        add() {
            this.form = {status: true};
            this.dialogVisible = true;
        },
        edit(item) {
            this.form = {
                id: item.id,
                username: item.username,
                role_id: item.role_id,
                mobile:item.mobile,
                status: item.status === 1,
                kefu_no:item.kefu_no
            };
            this.dialogVisible = true;
        },
        save() {
            if (this.form.id) {
                this.update(this.form);
            } else {
                this.store(this.form);
            }
        },
        store(data) {
            axios.post('/admin/user', data).then((res) => {
                if (res.data.code === 0) {
                    this.items.push(res.data.data);
                    this.dialogVisible = false;
                    this.reload();
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(function() {
                this.$message('系统错误');
            })
        },
        update(data) {
            axios.put('/admin/user/' + data.id, data).then((res) => {
                if (res.data.code === 0) {
                    this.fetch();
                    this.dialogVisible = false;
                    this.reload();
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(function() {
                this.$message('系统错误');
            })
        },
        destroy(id) {
            axios.delete('/admin/user/' + id).then((res) => {
                if (res.data.code === 0) {
                    this.fetch();
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(function() {
                this.$message('系统错误');
            })
        },
        restore(id) {
            axios.put('/admin/user/' + id + '/restore').then((res) => {
                if (res.data.code === 0) {
                    this.fetch();
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(function() {
                this.$message('系统错误');
            })
        },
        // 切换分页
        setPage: function(page) {
            this.currentPage = page;
            this.params.offset = (page - 1) * this.params.limit;
            this.fetch()
        },
        // 重新请求接口获取数据，参数发生了变化，页码重置为1
        reload: function() {
            if (this.currentPage === 1) {
                this.fetch();
            } else {
                this.setPage(1);
            }
        },

        handleTabClick(tab) {
            this.loading = true;
            if (this.currentTab === 'deleted') {
                this.params.trashed = 1;
                this.reload();
            } else {
                this.params.trashed = 0;
                this.reload();
            }
        }
    }
});
